/**
 * @author lianPf
 * @date 17-12-12
 * */
import React from 'react'
import moment from 'moment'
import { Table, Button, message, Modal } from 'antd'
import Search from '../../common/components/Search'
import searchStyle from '../../common/less/search.less'
import { fetchPost } from '../../../utils/request'
import Style from './Index.less'

import ExceptionList from '../../../../mock/exceptionList.json'

const {list} = ExceptionList

class Index extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      list: [],
      orderDetailModal: {
        visible: false,
      },
      divideOrderModal: {
        visible: false,
      },
      orderStatus: [
        {
          label: '待匹配',
          value: -3
        },
        {
          label: '待打款',
          value: 0
        },
        {
          label: '打款中',
          value: 1
        },
        {
          label: '锁住订单',
          value: -2
        },
        {
          label: '打款失败',
          value: -1
        },
        {
          label: '打款成功',
          value: 2
        }
      ],
      params: {
        verifiedStartTime: moment().add('days', 0).format('YYYY-MM-DD'),
        verifiedEndTime: moment().add('days', 0).format('YYYY-MM-DD'),
        bizNo: '',
        queryItemType: '',
        queryItemValue: '',
        status: -11
      },

      page: {
        currentPage: 1,
        pageSize: 10,
        totalCount: 0
      },
      searchParams: {
        list: [
          {
            name: '审核通过时间',
            type: 'range',
            key: ['verifiedStartTime', 'verifiedEndTime'],
            className: 'pr20',
            placeHolder: '',
            values: [moment().add('days', 0), moment().add('days', 0)]
          },
          {
            name: '订单号',
            type: 'text',
            key: 'bizNo',
            className: 'pr20',
            placeHolder: '请输入订单号',
            values: []
          },
          {
            name: '个人信息',
            type: 'group',
            key: ['queryItemType', 'queryItemValue'],
            className: 'pr20',
            values: [{value: '', name: '请选择'}]
          },
          {
            name: '',
            type: 'search',
            key: '',
            className: 'pr20',
            value: []
          }
        ],
        api: '/settle/fund/query'
      }
    }
  }

  componentDidMount () {
    // this.setState({
    //   list,
    // })
    this.getData()
  }

  getData () {
    let self = this
    const {params, page} = this.state
    const {currentPage, pageSize} = page
    let copyState = {}
    console.log(params, 'params')
    console.log(self.state.searchParams, 'searchParams')
    for (let i in params) {
      if (params[i] !== '') {
        if (i === 'queryItemType') {
          copyState['findType'] = params[i]
        } else if (i === 'queryItemValue') {
          copyState['inputValue'] = params[i]
        } else {
          copyState[i] = params[i]
        }
        copyState['status'] = -11
      }
    }

    console.log(copyState, 'copyState')

    fetchPost(`/finance/fund/list?currentPage=${currentPage}&pageSize=${pageSize}`, copyState).then((res) => {
      if (res.code === 0) {
        const {data, page} = res
        const {currentPage, pageSize, totalCount} = page
        const {prePaymentOrderVos} = data
        self.setState({
          list: prePaymentOrderVos,
          page: {
            currentPage,
            pageSize,
            totalCount
          }
        })
      } else {
        message.error(res.msg)
      }
    })

  }

  nextpage (current) {
    this.setState({
      page: {
        ...this.state.page,
        currentPage: current
      }
    }, () => {
      this.getData()
    })
  }

  changeParams (params) {
    this.setState({
      params,
    }, () => {
      this.getData()
    })
  }

  // modal
  showModal (modalKey, data) {
    this.setState({
      [modalKey]: {
        visible: true,
        ...data,
      },
    })
  }

  handleCancel = (modalKey) => {
    this.setState({
      [modalKey]: {
        visible: false,
      }
    })
  }
  getOrderStatus (e) {
    let data = this.state.orderStatus
    for (let i = 0; i < data.length; i++) {
      if (Number(data[i].value) === Number(e)) {
        return data[i].label
      }
    }
  }
  render () {
    const self = this
    const columns = [{
      title: '订单号',
      key: 'orderId',
      dataIndex: 'orderId'
    },
      {
        title: '产品',
        key: 'paymentSysName',
        dataIndex: 'paymentSysName'
      },
      {
        title: '资金方',
        key: 'fundName',
        dataIndex: 'fundName'
      },
      {
        title: '姓名',
        key: 'acctName',
        dataIndex: 'acctName'
      },
      {
        title: '手机号',
        key: 'mobile',
        dataIndex: 'mobile',
      },
      {
        title: '审核通过时间',
        key: 'verifiedTime',
        dataIndex: 'verifiedTime'
      },
      {
        title: '借款金额',
        key: 'contractAmount',
        dataIndex: 'contractAmount'
      },
      {
        title: '当前状态',
        key: 'statusDesc',
        dataIndex: 'statusDesc'
      },
      {
        title: '操作',
        key: '',
        width: '20%',
        className: 'text-center',
        dataIndex: '',
        render: (text, record) => {
          const {orderMoveDetailVoList} = record
          return (
            <a onClick={() => {this.showModal('divideOrderModal', {orderMoveDetailVoList})}}>详情</a>
          )
        }
      }
    ]

    const pagination = {
      total: this.state.page.totalCount || 0,
      pageSize: this.state.page.pageSize,
      showSizeChanger: false,
      showQuickJumper: true,
      showTotal (total) {
        return `Total ${total} `
      },
      onChange (current) {
        self.nextpage(current)
      }
    }

    const divideOrderColumns = [{
      title: '时间',
      dataIndex: 'createDateTime',
      key: 'createDateTime'
    }, {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (text, record) => {
        return self.getOrderStatus(record.status)
      }
    }, {
      title: '描述',
      dataIndex: 'acceptMessage',
      key: 'acceptMessage'
    },
    ]
    return (
      <div>
        <Modal
          title="分单详情"
          visible={this.state.divideOrderModal.visible}
          width="480"
          closable={false}
          footer={[
            <Button type="primary" onClick={() => this.handleCancel('divideOrderModal')}>
              确认
            </Button>,
          ]}
        >
          <div className={Style.modalBody}>
            <Table pagination={false} size='small' key='name' columns={divideOrderColumns}
                   dataSource={this.state.divideOrderModal.orderMoveDetailVoList}
                   bordered
            >
            </Table>
          </div>
        </Modal>

        <div className={searchStyle.searchClass}>
          <Search searchParams={this.state.searchParams} changeParams={(params) => this.changeParams(params)}
                  showAllReview={this.state.showAllReview}/>
        </div>

        <Table pagination={pagination} size='small' key='name' columns={columns} dataSource={this.state.list}
               loading={this.state.loading}
               bordered
        >
        </Table>
      </div>
    )
  }
}

export default Index
